<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/index.js"
import { checkblank, checkprice } from "../util/util.js";

const tableData = ref([]);
const checkObj = ref({
    page: 1,
    size: 10,

})
const total = ref({});

const addWinVisible = ref(false);
const addObj = ref({});

const editWinVisible = ref(false);
const editObj = ref({});
var editIndext = -1;

const formRef = ref({});

const ticketsOpt = ref([])
const typeOpt = ref([])
const ticketsOptS = ref([]);
const typeOptS = ref([]);


const getTicketsOpt = async function () {
    let resultA = await api.get("api/trec/tickets")
    let resultB = await api.get("api/trec/type");
    ticketsOpt.value = resultA.data;
    ticketsOptS.value = [{ id: null, name: "无" }, ...ticketsOpt.value];
    console.log("TICKETSOPT:" + ticketsOpt.value);
    typeOpt.value = resultB.data;
    typeOptS.value = [{ id: null, name: "无" }, ...typeOpt.value];
    console.log("TYPEOPT:" + typeOpt.value);
}





//显示数据
onMounted(async function () {
    await getTicketsOpt();
    checkData();
});

const checkData = async function (val) {
    console.log(checkObj.value.recdate);
    console.log(checkObj.value);
    if (typeof val == "number") {
        checkObj.value.page = val;
    }
    let result = await api.get("/api/trec", checkObj.value);

    //更新表格中的数据
    tableData.value = result.data.res;
    total.value = result.data.count;
};

//检查表单填写的金额
const rules = reactive({
    name: [{ validator: checkblank, trigger: "blur" }],
})

//添加数据
//显示窗口
const addWin = function () {
    addWinVisible.value = true;
    addObj.value = {};
}
//保存添加的数据
const addSave = async function () {
    formRef.value.validate(
        async (valid) => {
            if (valid) {
                let result = await api.postjson("/api/trec", addObj.value);
                //tableData.value.unshift(result.data);
                addWinVisible.value = false;
                ElMessage({
                    type: 'success',
                    message: '添加成功',
                });
                checkData();
            } else {
                console.log("添加失败");
            }
        }
    )
}

//删除数据
const del = function (index, row) {
    ElMessageBox.confirm(
        "确认删除？",
        "注意",
        {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        }).then(async function () {
            let result = await api.del("/api/trec", row.id);
            if (result.code == 200) {
                //tableData.value.splice(index, 1);
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                checkData();
            } else {
                ElMessage({
                    type: 'info',
                    message: result.message
                })
            }
        }).catch(function () {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        });
}

//修改数据
// const edit = function (index, row) {
//     //记录修改数据的下标
//     editIndext = index;
//     //绑定要修改的数据
//     editObj.value.id = row.id;
//     editObj.value.name = row.name;
//     editObj.value.price = row.price;
//     //打开对话框
//     editWinVisible.value = true;
// }
const isToday = function (date) {
    const today = new Date();
    const targetDate = new Date(date);
    console.log(today);
    return today.getFullYear() === targetDate.getFullYear() &&
        today.getMonth() === targetDate.getMonth() &&
        today.getDate() === targetDate.getDate();
}

const editSave = async function (index, row) {
    editObj.value = row;
    editObj.value.num=row.num;
    let result = await api.putjson("/api/trec", editObj.value);
    console.log(result.data);
    //tableData.value[editIndext] = result.data;
    editWinVisible.value = false;
    ElMessage({
        type: 'success',
        message: '修改成功',
    });
    checkData();

}
</script>
<template>
    <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="6">
            <el-select v-model="checkObj.ticketsId" placeholder="选择票据" style="width: 100%;">
                <el-option v-for="item in ticketsOptS" :label="item.name" :value="item.id" />
            </el-select>
        </el-col>
        <el-col :span="6">
            <el-select v-model="checkObj.typeId" placeholder="选择类型" style="width: 100%;">
                <el-option v-for="item in typeOptS" :label="item.name" :value="item.id" />
            </el-select>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" @click="checkData" style="width: 100%;">
                <el-icon style="vertical-align: middle">
                    <Search />
                </el-icon>
                搜索
            </el-button>
        </el-col>
        <el-col :span="4" :offset="4">
            <el-button type="primary" @click="addWin" style="width: 100%;">
                <el-icon>
                    <CirclePlusFilled />
                </el-icon>
                新增
            </el-button>
        </el-col>
    </el-row>

    <div style="height: 500px; overflow: auto; margin-bottom: 20px;
        border-radius: 10px; /* 圆角半径 */
        padding: 10px; /* 内间距 */
        background-color: #fff; /* 背景颜色 */
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="tickets.name" label="票据名称" min-width="150" />
            <el-table-column prop="ticketsType.name" label="票据类型" min-width="150" />
            <el-table-column prop="price" label="实际价格" min-width="120" />
            <el-table-column prop="amounts" label="售出数量" min-width="120" />
            <el-table-column prop="recdate" label="日期" min-width="120" />
            <el-table-column label="总价" min-width="90">
                <template #default="scope">
                    <span>{{ scope.row.price * scope.row.amounts }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="150">
                <template #default="scope">
                    <el-input-number v-model="scope.row.num" :min="1" :max="99" v-if="isToday(scope.row.recdate)" style="width: 100px;"/>
                    <el-button-group>
                        <!-- <el-button type="danger" @click="del(scope.$index, scope.row)">
                            <el-icon>
                                <Delete />
                            </el-icon>
                        </el-button> -->
                        <el-button v-if="isToday(scope.row.recdate)" type="primary"
                            @click="editSave(scope.$index, scope.row)">
                            <span style="vertical-align: middle"> 售卖 </span>
                        </el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-pagination background layout="prev, pager, next" :total="total" @current-change="checkData"
        :page-size="checkObj.size"
        style="position: fixed; left: 50%; transform: translateX(-50%); bottom: 100px; z-index: 1000;" />

    <!-- 新增信息的弹出框 -->
    <el-dialog v-model="addWinVisible" title="添加票种" width="500">
        <el-form :model="addObj" label-width="80px" :rules="rules" ref="formRef">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="名称">
                        <el-select v-model="addObj.ticketsId" placeholder="选择票据" style="width: 100%;">
                            <el-option v-for="item in ticketsOpt" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="票据类型">
                        <el-select v-model="addObj.typeId" placeholder="选择类型" style="width: 100%;">
                            <el-option v-for="item in typeOpt" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addWinVisible = false">取消</el-button>
                <el-button type="primary" @click="addSave">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style></style>
